<template>
  <div class="scroll-container">
    <div 
      ref="scrollContainerRef" 
      :class="{ 'custom-scrollbar': true, 'manual-scrolling': isManualScrolling }" 
      @scroll="handleScroll"
    >
      <div class="scroll-content">
        <div v-for="(item, index) in contentList" :key="index" class="content-item">
          {{ item }}
        </div>
      </div>
    </div>
    <button @click="addContent" class="add-button">添加内容</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'

const scrollContainerRef = ref(null)
const contentList = ref(Array(10).fill('初始内容'))
const isAutoScrolling = ref(true)
const isManualScrolling = ref(false)
const scrollTimer = ref(null)
const manualScrollTimeout = ref(null)

const scrollInterval = 2500
const manualScrollDelay = 300

const scrollToBottom = () => {
  if (scrollContainerRef.value) {
    scrollContainerRef.value.scrollTop = scrollContainerRef.value.scrollHeight
  }
}

const startAutoScroll = () => {
  stopAutoScroll()
  if (isAutoScrolling.value) {
    scrollTimer.value = setInterval(() => {
      scrollToBottom()
    }, scrollInterval)
  }
}

const stopAutoScroll = () => {
  if (scrollTimer.value) {
    clearInterval(scrollTimer.value)
    scrollTimer.value = null
  }
  
  if (manualScrollTimeout.value) {
    clearTimeout(manualScrollTimeout.value)
    manualScrollTimeout.value = null
  }
}

const handleScroll = () => {
  isAutoScrolling.value = false
  isManualScrolling.value = true
  stopAutoScroll()
  
  manualScrollTimeout.value = setTimeout(() => {
    const container = scrollContainerRef.value
    if (container) {
      // 只有当用户滚动到底部时才恢复自动滚动
      const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight <= 10
      
      if (isAtBottom) {
        isAutoScrolling.value = true
        startAutoScroll()
      }
      
      isManualScrolling.value = false
    }
  }, manualScrollDelay)
}

const addContent = () => {
  const newContent = `新内容 ${contentList.value.length + 1}`
  contentList.value.push(newContent)
  
  nextTick(() => {
    // 无论是否自动滚动，添加内容后都滚动到底部
    scrollToBottom()
    
    // 如果用户在底部，恢复自动滚动
    if (isAutoScrolling.value) {
      startAutoScroll()
    }
  })
}

onMounted(() => {
  nextTick(() => {
    scrollToBottom()
    startAutoScroll()
  })
})

onBeforeUnmount(() => {
  stopAutoScroll()
})

watch(contentList, () => {
  nextTick(() => {
    scrollToBottom()
  })
})
</script>

<style scoped>
.scroll-container {
  height: 300px;
  margin-bottom: 10px;
  position: relative;
}

.custom-scrollbar {
  height: 100%;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background-color: #ffffff;
}

.scroll-content {
  min-height: 100%;
  padding: 8px 0;
}

.content-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s;
}

.content-item:hover {
  background-color: #f9fafb;
}

.add-button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #1f2937;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-button:hover {
  background-color: #374151;
}

.add-button:active {
  background-color: #4b5563;
}

/* 自定义滚动条样式 */
:deep(.custom-scrollbar::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.custom-scrollbar::-webkit-scrollbar-track) {
  background: #f9fafb;
  border-radius: 3px;
  margin: 4px 0;
}

:deep(.custom-scrollbar::-webkit-scrollbar-thumb) {
  background: #d1d5db;
  border-radius: 3px;
  transition: all 0.2s ease;
}

:deep(.custom-scrollbar::-webkit-scrollbar-thumb:hover) {
  background: #9ca3af;
}

:deep(.custom-scrollbar.manual-scrolling::-webkit-scrollbar-thumb) {
  background: #6b7280;
}

:deep(.custom-scrollbar.manual-scrolling::-webkit-scrollbar-track) {
  background: #f3f4f6;
}

/* Firefox 滚动条样式 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f9fafb;
}

.custom-scrollbar.manual-scrolling {
  scrollbar-color: #6b7280 #f3f4f6;
}
</style>